<!-- 缴纳账单 -->
<template>
  <cu-layout :navProp="{ placeholder: true, title: formData.year_month }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-pay-bill-container`]">
      <view class="bill-info">
        <view class="price">
          <span class="unit tips">{{ formData.title }}</span>
          <span class="unit tips">{{ formData.customer_name }}</span>
          <span class="unit">{{ paymentStatus }}</span>
          <span class="amount">{{ formData.total_amount }}</span>
          <span class="unit">元</span>
          <!-- <span class="unit tips">最后缴纳日期: {{ formData.year_month }}</span> -->
        </view>
      </view>
      <view class="message">共{{ fee_list.length }}项应缴费项，合计{{ formData.total_amount }}元</view>
      <view class="bill-list" v-for="(item, index) in fee_list" :key="index" @click="handleItemClick(item)">
        <view class="desc">
          <view class="title">{{ item.name }}</view>
          <view class="date">{{ item.remark }}</view>
        </view>
        <view class="price">
          {{ item.amout }}元
          <uv-icon :name="!item.isOpen ? 'arrow-right' : 'arrow-down'" size="12"></uv-icon>
        </view>
        <view v-if="item.isOpen" class="item-detail" v-for="(items, indexs) in item.list" :key="indexs">
          <view class="desc">{{ items.remark }} </view>
          <view class="price">{{ items.amount }}元 </view>
        </view>
      </view>
      <!-- 应退金额 -->
      <template v-if="yt_fee_list.length">
        <view class="message">共{{ fee_list.length }}项应退费项，合计{{ formData.yt_total_amount }}元</view>
        <view class="bill-list" v-for="(item, index) in yt_fee_list" :key="index" @click="handleItemClick(item)">
          <view class="desc">
            <view class="title">{{ item.name }}</view>
            <view class="date">{{ item.remark }}</view>
          </view>
          <view class="price">
            {{ item.amout }}元
            <uv-icon :name="!item.isOpen ? 'arrow-right' : 'arrow-down'" size="12"></uv-icon>
          </view>
          <view v-show="item.isOpen" class="item-detail" v-for="(items, indexs) in item.list" :key="indexs">
            <view class="desc">{{ items.remark }} </view>
            <view class="price">{{ items.amount }}元 </view>
          </view>
        </view>
      </template>
      <view v-if="!formData.is_all_pay" class="fixed-wrap">
        <view class="fixed-button">
          <uv-button type="primary" text="立即付款" customStyle="margin-top: 10px" @click="submit"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { billMonth } from './api'

export default {
  name: 'pay-bill',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      safeAreaInsets: 0,
      formData: {
        title: '',
        customer_name: '',
        year_month: '',
        total_amount: '',
        last_date: '',
        yt_total_amount: 0,
        is_all_pay: false,
        ys_total_amount: 0,
        show_refund: 0,
        show_msg: '',
      },
      fee_list: [],
      yt_fee_list: [],
      paymentStatus: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    computedName() {
      const { ys_total_amount, is_all_pay, show_refund, total_amount, yt_total_amount, show_msg } = this.formData
      let statusName = ''
      if (ys_total_amount) {
        if (is_all_pay) {
          if (show_refund) {
            if (show_msg) {
              statusName = '已退'
            } else {
              statusName = '待退'
            }
          } else {
            if (total_amount >= 0) {
              statusName = '已缴'
            } else {
              statusName = '已退'
            }
          }
        } else {
          if (show_refund) {
            if (show_msg) {
              statusName = '已退'
            } else {
              statusName = '待退'
            }
          } else {
            if (total_amount >= 0) {
              statusName = '应缴'
            } else {
              statusName = '应退'
            }
          }
        }
      } else {
        if (is_all_pay) {
          if (yt_total_amount <= 0) {
            statusName = '应退'
          } else if (show_refund) {
            if (show_msg) {
              statusName = '已退'
            } else {
              statusName = '待退'
            }
          } else {
            if (yt_total_amount >= 0) {
              statusName = '应缴'
            } else {
              statusName = '已退'
            }
          }
        } else {
          if (show_refund) {
            if (show_msg) {
              statusName = '已退'
            } else {
              statusName = '待退'
            }
          } else {
            if (total_amount >= 0) {
              statusName = '应缴'
            } else {
              statusName = '应退'
            }
          }
        }
      }
      this.paymentStatus = statusName
    },
    async getData() {
      const { belong_type, contract_id, year_month } = this.$Route.query
      const { data } = await billMonth({ belong_type, contract_id, year_month, new_nps: 1 })
      for (let key in this.formData) {
        this.formData[key] = data[key]
      }
      this.fee_list = data.fee_list.map((v) => {
        v.list.map((v1) => {
          v1.isOpen = false
          return v1
        })
        return v
      })
      this.yt_fee_list = data.yt_fee_list.map((v) => {
        v.list.map((v1) => {
          v1.isOpen = false
          return v1
        })
        return v
      })
      this.computedName()
    },
    handleItemClick(item) {
      item.isOpen = !item.isOpen
    },
    submit() {
      // const { project_id } = this.$Route.query
      // this.$ROUTE.go('/pages/payment/index', { projectId: project_id, scene: 'bill', amount: this.formData.total_amount })
      const { belong_type, contract_id, year_month, project_id } = this.$Route.query
      this.$ROUTE.go('/pages/subpackage/bill/need-pay-details', { contract_id, year_month, belong_type, project_id })
      // return
      // const { project_id, contract_id } = this.$Route.query
      // this.$ROUTE.go('/pages/payment/index', {
      //   projectId: project_id,
      //   scene: 'bill',
      //   amount: this.formData.total_amount,
      //   contractId: contract_id,
      //   couponIds: [],
      //   belongType: '个人',
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('pay-bill-container')} {
  position: relative;
  background: #f5f5f5;
  .bill-info {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 44rpx;
    width: 100%;
    height: 130px;
    background-image: cdn('/common/static/images/bill_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      justify-content: center;
      .unit {
        font-size: 10px;
        margin: 0 3px;
      }
      .tips {
        flex-basis: 100%;
        text-align: center;
        margin-top: 5px;
      }
      .amount {
        font-size: 28px;
      }
    }
  }
  .message {
    font-size: #999999;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
  }
  .bill-list {
    background: white;
    margin-bottom: 10px;
    padding: 15px 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .desc {
      .date {
        margin-top: 5px;
        font-size: 10px;
      }
    }
    .price {
      margin-left: auto;
      display: flex;
      .uv-icon {
        margin-left: 5px;
      }
    }
    .item-detail {
      padding-top: 10px;
      font-size: 10px;
      flex-basis: 100%;
      display: flex;
      color: $uv-primary;
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
}
</style>
